<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>部门管理</title>
    <link rel="stylesheet" href="../static/plugin/layui/css/layui.css">
    <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
    <!--[if lt IE 9]>
    <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
    <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
    <![endif]-->
</head>
<body>
<div class="layui-fluid">
    <div class="layui-bg-white" style="height: 100px;padding: 0px;">
        <h1 style="text-align: center">部门管理</h1>
        <span class="layui-breadcrumb" style="bottom:10px; left: 30px;">
          <a href="/index.html">首页</a>
          <a href="">组织机构</a>
          <a><cite>部门管理</cite></a>
        </span>
    </div>

    <hr class="layui-bg-gray">

    <!--查询框-->
    <blockquote class="layui-elem-quote">
        <form class="layui-form layui-form-item" style="margin-top: 30px">
            <div class="layui-inline">
                <label class="layui-form-label">部门名称：</label>
                <div class="layui-input-inline" style="width: 150px;">
                    <input type="text" name="name" placeholder="请输入部门名称" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">部门状态：</label>
                <div class="layui-inline" style="width: 300px;">
                    <input type="radio" name="enable" value="" title="不限" checked>
                    <input type="radio" name="enable" value="true" title="启用">
                    <input type="radio" name="enable" value="false" title="禁用">
                </div>
            </div>
            <div class="layui-inline" style="float: right">
                <buton lay-submit class=" layui-btn layui-btn-radius layui-btn-normal" lay-filter="query"
                       style="width: 150px;">查询
                </buton>
                <buton lay-submit class=" layui-btn layui-btn-radius layui-btn-primary" lay-filter="reset"
                       style="width: 150px;">重置
                </buton>
            </div>
        </form>
    </blockquote>
    <!--数据主体-->
    <div>
        <!--查询框-->
        <div class="layui-btn-group layui-form">
            <button class="layui-btn" lay-submit lay-filter="add">新增</button>
            <button class="layui-btn" lay-submit lay-filter="edit">编辑</button>
            <button class="layui-btn" lay-submit lay-filter="delete">删除</button>
        </div>
        <!--查询框-->

        <!--数据表-->
        <table id="department" lay-filter="bar"></table>
        <!--数据表-->
    </div>
    <!--数据主体-->
</div>

<script src="../static/js/jquery.js"></script>
<script src="../static/plugin/layui/layui.js"></script>
<script src="../static/js/common.js"></script>
<script id="tpl_is_enable" type="text/html">
    <div>
        {{# if(d.enable === true){ }}
        <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value={{=d.id}} checked
               lay-filter="is_enable"/>
        {{# }else{ }}
        <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value={{=d.id}}
               lay-filter="is_enable"/>
        {{# } }}
    </div>
</script>
<script id="tpl_inset_update" type="text/html">
    <div class="layui-form" style="width: 450px; margin-top: 30px">
        <input type="hidden" name="id" value={{=d.id}}>
        <div class="layui-form-item">
            <label class="layui-form-label">部门名称</label>
            <div class="layui-input-block">
                <input type="text" name="name" required lay-verify="required" placeholder="请输入部门名称" autocomplete="off"
                       class="layui-input" value={{=d.name}}>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">部门描述</label>
            <div class="layui-input-block">
                <textarea name="description" placeholder="请输入部门描述" class="layui-textarea">{{=d.description}}</textarea>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">排序</label>
            <div class="layui-input-block">
                <input type="text" name="sort" required lay-verify="required|number" placeholder="请输入排序号"
                       autocomplete="off" class="layui-input" value={{=d.sort}}>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">是否启用</label>
            <div class="layui-input-block">
                {{# if(d.enable === false){ }}
                <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value=true>
                {{# }else{ }}
                <input type="checkbox" name="enable" lay-skin="switch" lay-text="启用|禁用" value=true checked>
                {{# } }}
            </div>
        </div>
        <input type="hidden" value={{=d.version}}>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit lay-filter="formData">立即提交</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </div>
</script>
<script>
    layui.use(['layer', 'element', 'table', 'laypage', 'laytpl', 'util', 'form', 'jquery'], function () {
        var $ = layui.$;
        var layer = layui.layer;
        var element = layui.element;
        var table = layui.table;
        var laypage = layui.laypage;
        var util = layui.util;
        var laytpl = layui.laytpl;
        var form = layui.form;

        //添加修改弹窗index
        var insert_update_layer_index;
        //表格渲染
        table.render({
            elem: '#department',
            height: 'full-389',
            cols: [[
                {
                    checkbox: true
                },
                {
                    field: 'id',
                    title: 'id',
                    align: 'center'
                }, {
                    field: 'name',
                    title: '部门名称',
                    align: 'center'
                }, {
                    field: 'description',
                    title: '描述',
                    align: 'center'
                }, {
                    field: 'sort',
                    title: '排序',
                    align: 'center'
                }, {
                    field: 'gmtCreate',
                    title: '创建时间',
                    align: 'center',
                    templet: function (d) {
                        return util.toDateString(d.gmtCreate, 'yyyy-MM-dd HH:mm:ss');
                    }
                }, {
                    fixed: 'right',
                    field: 'enable',
                    title: '部门状态',
//                    width: 150,
                    align: 'center',
                    templet: '#tpl_is_enable'
                }
            ]],
            url: '/persional/department/page', //异步加载地址
            method: 'GET',                //请求方式
            page: {                       //是否开启分页
                limit: 10,                //每页个数
                limits: [10, 20, 50],     //可选每页个数
            },
            request: {
                pageName: 'current',     //页码的参数名称，默认：page
                limitName: 'size'        //每页数据量的参数名，默认：limit
            },
            response: {
                statusName: 'errcode',   //数据状态的字段名称，默认：code
                statusCode: 1,           //成功的状态码，默认：0
                msgName: 'errmsg',       //状态信息的字段名称，默认：msg
                countName: 'total',      //数据总数的字段名称，默认：count
                dataName: 'data'         //数据列表的字段名称，默认：data
            },
            loading: true,               //开启加载动画
            id: 'department',
        });
        //监听增加按钮
        form.on('submit(add)', function () {
            var formHtml = tpl_inset_update.innerHTML;
            laytpl(formHtml).render({"enable": true}, function (html) {
                formHtml = html;
            });
            insert_update_layer_index = layer.open({
                type: 1,
                anim: 1,
                title: '新增',
                area: ['500px', '400px'],
                content: formHtml.toString(),

                success: function (layero, index) {
                    form.render();
                }
            });
        });
        //监听修改按钮
        form.on('submit(edit)', function () {
            var checkData = getSelectRow('department');
            if (!checkData) {
                return;
            }
            $.ajax({
                url: '/persional/department/get/' + checkData.id,
                type: 'GET',
                success: function (res) {
                    if (res.errcode) {
                        var formHtml = tpl_inset_update.innerHTML;
                        laytpl(formHtml).render(res.data, function (html) {
                            formHtml = html;
                        });
                        insert_update_layer_index = layer.open({
                            type: 1,
                            anim: 1,
                            title: '修改',
                            area: ['500px', '400px'],
                            content: formHtml.toString(),

                            success: function (layero, index) {
                                form.render();
                            }
                        })
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 2});
                }
            });
        });
        //删除按钮事件监听
        form.on('submit(delete)', function () {
            var checkData = getSelectRows('department');
            var ids = [];
            for (var i = 0; i < checkData.length; i++) {
                ids.push('' + checkData[i].id);
            }
            $.ajax({
                url: '/persional/department/delete',
                type: 'DELETE',
                data: JSON.stringify(ids),
                success: function (res) {
                    if (res.errcode) {
                        layer.msg('操作成功', {icon: 1, time: 500}, function () {
                            table.reload('department', {
                                url: '/persional/department/page'
                            });
                        });
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 2});
                }
            })
        });

        //开关事件监听
        form.on('switch(is_enable)', function (data) {
            var id = data.value;
            var enable = data.elem.checked;
            var department = {
                "id": id,
                "enable": enable
            };
            $.ajax({
                url: '/persional/department/update',
                type: 'PUT',
                data: JSON.stringify(department),
                success: function (res) {
                    if (res.errcode) {
                        layer.msg('操作成功', {icon: 1});
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 2});
                }
            })
        });

        //查询按钮事件监听
        form.on('submit(query)', function (data) {
            console.log(data.field);
            table.reload('department', {
                url: '/persional/department/page',
                where: {
                    name: data.field.name,
                    enable: data.field.enable
                }
            });
        });

        //重置按钮事件监听
        form.on('submit(reset)', function (data) {
            table.reload('department', {
                url: '/persional/department/page',
                where: {
                    name: null,
                    enable: null
                }
            });
        });

        //添加修改事件响应
        form.on('submit(formData)', function (data) {
            var department = data.field;
            var dataUrl, type;
            dataUrl = department.id ? '/persional/department/update' : '/persional/department/insert';
            type = department.id ? 'PUT' : 'POST';
            if (!department.enable){
                department.enable = false;
            }
            $.ajax({
                url: dataUrl,
                type: type,
                data: JSON.stringify(department),
                success: function (res) {
                    if (res.errcode) {
                        layer.msg('操作成功', {icon: 1, time: 500}, function () {
                            table.reload('department', {
                                url: '/persional/department/page'
                            });
                        });
                    } else {
                        layer.msg('操作失败', {icon: 2});
                    }
                },
                error: function (data) {
                    layer.msg('网络错误', {icon: 2});
                }
            })
            layer.close(insert_update_layer_index);
        });

        //表格checkbox处理
        var getSelectRow = function (tableId) {
            var checkStatus = table.checkStatus(tableId).data;
            if (checkStatus === null || checkStatus.length === 0) {
                layer.msg('请选择一行', {time: 500});
                return false;
            } else if (checkStatus.length > 1) {
                layer.msg('您选择了多行，请只选择一行', {time: 500});
                return false;
            } else {
                return checkStatus[0];
            }
        }

        var getSelectRows = function (tableId) {
            var checkStatus = table.checkStatus(tableId).data;
            if (checkStatus === null || checkStatus.length === 0) {
                layer.msg('请选择一行', {time: 500});
                return false;
            } else {
                return checkStatus;
            }
        }
    });
</script>
</body>
</html>